<template>
  <!--订单选择-->
  <a-modal
    title="已分配精华液"
    :visible.sync="bottleShow"
    @ok="handleOk"
    :confirm-loading="confirmLoading"
    @cancel="handleCancel"
    width="85%"
    class="procedure-modal"
  >
    <div class="operation-search">
      <a-form layout="inline" :form="searchItem">
        <a-form-item label="销售单号：">
          <a-input
            :allowClear="true"
            placeholder="请输入"
            v-model="searchItem.SellOrderNo"
          />
        </a-form-item>
        <a-form-item label="投料单号：">
          <a-input
            :allowClear="true"
            placeholder="请输入"
            v-model="searchItem.PlanNo"
          />
        </a-form-item>
        <a-form-item label="精华液编码/名称：">
          <a-input
            :allowClear="true"
            placeholder="请输入"
            v-model="searchItem.MaterialNameCode"
          />
        </a-form-item>
        <a-form-item label="批次号：">
          <a-input
            :allowClear="true"
            placeholder="请输入"
            v-model="searchItem.BatchNo"
          />
        </a-form-item>

        <a-form-item label="计划单号：">
          <a-input
            :allowClear="true"
            placeholder="请输入"
            v-model="searchItem.PackingPlanNo"
          />
        </a-form-item>
        <a-form-item>
          <a-button class="default-button" @click="getPackingPlansListFun">
            查询
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="height: 420px">
      <a-table
        :columns="orderColums"
        :row-key="(record) => record.num"
        :data-source="orderList"
        :loading="loading1"
        :pagination="false"
        :scroll="{ x: 700, y: 350 }"
      >
      </a-table>
    </div>
    <a-pagination
      show-size-changer
      :default-current="1"
      :pageSizeOptions="pageSizeOptions"
      :total="orderListTotal"
      :pageSize="searchItem.pageRequestModel.pageSize"
      @change="procedureChange"
      @showSizeChange="onShowSizeChange"
    />
  </a-modal>
</template>

<script>
import { debounce } from "@/common/debounce";
import {
  getSemiMGoodsDistributeDetailListByAlready,
  insSemiMGoodsDistributeDetail,
} from "@/api/SemiMGoodsDistributeDetail/index";
import { forEach } from "jszip";
const orderColums = [
  {
    title: "序号",
    dataIndex: "num",
    fixed: "left",
    width: 60,
    align: "center",
  },
  {
    title: "销售单号",
    dataIndex: "SellOrderNo",
    key: "SellOrderNo",
    ellipsis: true,
    align: "center",
    width: 120,
  },
  {
    title: "投料单号",
    dataIndex: "PlanNo",
    key: "PlanNo",
    ellipsis: true,
    align: "center",
    width: 120,
  },
  {
    title: "精华液编码",
    dataIndex: "MaterialCode",
    sorter: true,
    align: "center",
    width: 130,
  },
  {
    title: "精华液名称",
    dataIndex: "MaterialName",
    align: "center",
    ellipsis: true,
  },
  {
    title: "批次号",
    dataIndex: "BatchNo",
    align: "center",
    ellipsis: true,
    width: 150,
  },
  {
    title: "预分配单号",
    dataIndex: "OrderCode",
    align: "center",
    ellipsis: true,
    width: 140,
  },
  {
    title: "计划单号",
    dataIndex: "PackingPlanNo",
    align: "center",
    ellipsis: true,
    width: 130,
  },
  {
    title: "当前库存",
    dataIndex: "CurQty",
    align: "center",
    ellipsis: true,
    width: 120,
  },
  {
    title: "已分配数量",
    dataIndex: "AllocatedQty",
    align: "center",
    ellipsis: true,
    width: 120,
  },
  {
    title: "已领料数量",
    dataIndex: "RealQty",
    align: "center",
    ellipsis: true,
    width: 120,
  },
  {
    title: "生产日期",
    dataIndex: "CreateDt",
    align: "center",
    ellipsis: true,
    width: 150,
  },
  {
    title: "质检有效期",
    dataIndex: "ValidityDt",
    align: "center",
    ellipsis: true,
    width: 150,
  },
];
export default {
  props: {
    bottleShow: {
      type: Boolean,
      default: false,
    },
    planNo: {
      type: String,
      default: "",
    },
    materialCode: {
      type: String,
      default: "",
    },
    batchNo: {
      type: String,
      default: "",
    },
  },
  model: {
    prop: "bottleShow",
    event: "close",
  },

  data() {
    return {
      confirmLoading: false, //modal的loading
      defaulttimeList: [], //默认时间
      expandedRowKeys: [],
      expandedRow: [],
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        materialNameCode: null,
        batchNo: null,
      }, //搜索参数
      orderColums,

      orderList: [], //工单选择列表
      orderItem: { batchNo: null },
      orderListTotal: 0,
      pageSizeOptions: ["30", "50", "100", "200", "500", "1000"], //分页
      loading1: false,
    };
  },
  methods: {
    //切换页数
    procedureChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.getPackingPlansListFun();
    },
    //切换条数
    onShowSizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.getPackingPlansListFun();
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.expandedRowKeys = selectedRowKeys;
      this.expandedRow = selectedRows;
    },
    //获取单据列表
    getPackingPlansListFun: debounce(async function () {
      let that = this;
      that.loading1 = true;
      that.expandedRowKeys = [];
      that.expandedRow = [];

      let res = await getSemiMGoodsDistributeDetailListByAlready(
        that.searchItem
      );
      if (res.Status == 10000) {
        let { pageIndex, pageSize } = that.searchItem.pageRequestModel;
        res.Data.Data.map((item, index) => {
          item.num = (pageIndex - 1) * pageSize + index + 1;
          item.batchNo = item.BatchNo;
          item.CreateDt = that.dateExt.showDate(item.CreateDt);
          item.ValidityDt = that.dateExt.showDateTime(item.ValidityDt);
        });
        that.orderList = res.Data.Data;
        that.orderListTotal = res.Data.TotalNumber;
      } else {
        that.$message.error(res.Message);
      }
      that.loading1 = false;
    }),

    //关闭弹窗
    handleCancel() {
      this.orderItem = {};
      this.$emit("close", false);
    },
    //确认添加/修改
    handleOk() {
      this.orderItem = {};
      this.$emit("close", false);
    },
    //表格选择
    handleTableChange() {},
  },
  created() {
    let that = this;
  },
  watch: {
    bottleShow: {
      handler(newV, oldV) {
        if (newV) {
          if (this.planNo) {
            this.searchItem.PlanNo = this.planNo;
          }
          if (this.materialCode) {
            this.searchItem.MaterialNameCode = this.materialCode;
          }
          if (this.batchNo) {
            this.searchItem.BatchNo = this.batchNo;
          }

          this.getPackingPlansListFun();
        }
      },
      immediate: true, // 重点
      deep: true, // 重点
    },
  },
};
</script>

<style lang="less" scoped>
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    height: 1000px;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .searchrow {
    display: flex;
    justify-content: flex-end;
    padding: 2px;
  }
  .operation-search {
    display: flex;
    //justify-content: flex-end;
    border-bottom: 2px solid #f0f2f5;
    //margin-bottom: 0.9375rem;
    .selectwidth {
      width: 15rem;
    }
    .selectrightwidth {
      width: 7rem;
    }
  }
}
/deep/.ant-table-body {
  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}
</style>
